import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Flex, Icon, Tools } from 'weaver-mobile';

import { menuRoute } from '../menu/util';

const getLabel = Tools.getLabel;

@withRouter
@observer
export default class NavBar extends Component {
  static defaultProps = {
    prefixCls: 'email-nav-bar',
  }

  getTitle = () => {
    const locale = {
      inbox: getLabel('19816', '收件箱'),
      sent: getLabel('19558', '已发送'),
      draft: getLabel('2039', '草稿箱'),
      deleted: getLabel('2040', '垃圾箱'),
      doing: getLabel('83090', '待办邮件'),
      star: getLabel('81337', '标星邮件'),
      inner: getLabel('24714', '内部邮件'),
      folder: getLabel('30915', '我的文件夹'),
      tag: getLabel('30918', '我的标签'),
      attachment: getLabel('500738', '附件中心'),
      contacts: getLabel('572', '联系人'),
    };
    const { location: { pathname } } = this.props;
    if (/^\/\w+$/.test(pathname)) {
      const id = pathname.replace(/^\//, '');
      if (menuRoute.some(r => r === id)) {
        return locale[id];
      }
    }
    return '';
  }

  render() {
    const { prefixCls, history, path, onSelect } = this.props;

    return (
      <div className={prefixCls}>
        <Flex className={`${prefixCls}-flex`}>
          <Flex.Item className={`${prefixCls}-left`} onClick={() => history.push('/menu')}>
            <Icon type="more-3" />
          </Flex.Item>
          <Flex.Item className={`${prefixCls}-title`}>
            {this.getTitle()}
          </Flex.Item>
          <Flex.Item className={`${prefixCls}-right`} onClick={() => onSelect ? onSelect(path) : history.push(path)}>
            <Icon type="mail-write-letter"/>
          </Flex.Item>
        </Flex>
      </div>
    );
  }
}